<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="w">
      <div class="boxL">
        <a href="https://www.pdsu.edu.cn/xxgk/fgrw/xyfg.htm">
          <div class="boxLt">
            <div class="boxLt1">校园风光</div>
            <div class="boxLt2">xiaoyuanfengguang</div>
          </div>
        </a>
        <div class="boxLb">
          <img
            src="https://www.pdsu.edu.cn/images/fgt12.jpg"
            width="300"
            height="200"
          />
        </div>
      </div>
      <div class="boxRU">
        <div class="boxRU1">
          <img
            src="https://www.pdsu.edu.cn/images/fgt11.jpg"
            width="500"
            height="250"
          />
        </div>
        <a href="https://www.pdsu.edu.cn/xxgk/fgrw/xshd.htm">
          <div class="boxRU2">
            <div class="boxRU21">学术研究</div>
            <div class="boxRU22">xueshuyanjiu</div>
          </div>
        </a>
        <div class="boxRU3">
          <img
            src="https://www.pdsu.edu.cn/images/1.JPG"
            width="250"
            height="250"
          />
        </div>
      </div>
      <div class="boxRD">
        <a href="https://www.pdsu.edu.cn/xxgk/fgrw/xsyj.htm">
          <div class="boxRD1">
            <div class="boxRD11">学生活动</div>
            <div class="boxRD12">xueshenghuodong</div>
          </div>
        </a>
        <div class="boxRD2">
          <img
            src="https://www.pdsu.edu.cn/images/fgt14.jpg"
            width="300"
            height="150"
          />
        </div>
        <div class="boxRD3">
          <img
            src="https://www.pdsu.edu.cn/images/fgt13.jpg"
            width="300"
            height="150"
          />
        </div>
      </div>
    </div>
  </body>
  <style>
    a{
        text-decoration: none;
    }
    .w {
      width: 1200px;
      height: 400px;
      background-color: purple;
      margin: auto;
    }
    .boxL {
      width: 300px;
      height: 400px;
      background-color: pink;
      float: left;
    }
    .boxLt {
      width: 300px;
      height: 200px;
      background-color: rgb(162, 10, 10);
      font-size: 25px;
      color: white;
      box-sizing: border-box;
      padding-top: 60px;
      /*display: grid;
      place-items: center;
      height: 200px;*/
    }

    .boxLt1 {
      text-align: center;
      margin: auto;
    }
    .boxLt2 {
      font-size: 20px;
      text-align: center;
    }

    .boxLb {
      width: 300px;
      height: 200px;
      background-color: aqua;
    }

    .boxRU {
      width: 900px;
      height: 250px;
      background-color: hotpink;
      float: left;
    }
    .boxRU1 {
      width: 500px;
      height: 250px;
      background-color: #ea7575;
      float: left;
    }
    .boxRU2 {
      width: 150px;
      height: 250px;
      background-color: #b4b913;
      float: left;
      font-size: 25px;
      color: white;
      box-sizing: border-box;
      writing-mode: vertical-rl; /* 从右向左竖排 */
      height: 250px; /* 给高度才能看到换列 */
      padding-right: 15px;
    }
    .boxRU21 {
      text-align: center;
      margin: auto;
    }
    .boxRU22 {
      font-size: 10px;

      text-align: center;
    }

    .boxRU3 {
      width: 250px;
      height: 250px;
      background-color: #e071f7;
      float: left;
    }

    .boxRD {
      width: 900px;
      height: 150px;
      background-color: rgb(188, 247, 86);
      float: left;
    }
    .boxRD1 {
      width: 300px;
      height: 150px;
      background-color: #137264;
      float: left;
      font-size: 25px;
      color: white;
      box-sizing: border-box;
      padding-top: 40px;

      /*font-size: 30px;
      display: grid;
      place-items: center;
      height: 150px;*/
    }
    .boxRD11 {
      text-align: center;
      margin: auto;
    }
    .boxRD12 {
      font-size: 20px;
      text-align: center;
    }

    .boxRD2 {
      width: 300px;
      height: 150px;
      background-color: #f2de5a;
      float: left;
    }
    .boxRD3 {
      width: 299px;
      height: 150px;
      background-color: #1f476d;
      float: left;
    }
  </style>
</html>
